
import { List } from 'antd-mobile';
import React from 'react';
import history from 'router/history'
import style from './style.module.scss';
import CommodityListItem from 'components/CommodityListItem'
import Panel from 'components/Panel';
import { RouteChildrenProps, withRouter } from 'react-router-dom';
import lazy from 'router/utils/lazy';
import { decorator } from 'grey-react-box';
import { useUrlParameter, setUrlParameter } from 'router/utils';
import { server } from 'server';

const AddresSselect = lazy(() => import('page/AddresSselect'));

const district = require('constant/area.json');

const Item = List.Item;
const Brief = Item.Brief;

export default decorator<any, RouteChildrenProps>(withRouter)(props => {

    const [addres] = useUrlParameter('addres');

    const { accountsData, sa, update } = useSettleAccounts();

    const totalPrice = React.useMemo(() => {
        if (!accountsData || !accountsData.goodsList) return 0;
        let sum = 0;
        accountsData.goodsList.forEach(e => {
            sum += e.goodsPrice * e.goodsNumber;
        }, [])
        return sum;
    }, [accountsData])

    if (!accountsData) return <></>;

    return (
        <>
            <Panel className={style.body} >
                <div className={style.list} >
                    <List renderHeader={() => '收获地址'} className="my-list">
                        <Item arrow="horizontal" onClick={() => { setUrlParameter({ addres: sa }) }} >
                            {
                                accountsData.userAddress
                                    ? <>
                                        {accountsData.userAddress && districtToString(JSON.parse(accountsData.userAddress), district, '')} {accountsData.userDetailAddress}
                                        <Brief>{accountsData.userPhone}<br />{accountsData.userName}</Brief>
                                    </>
                                    : '请选择地址'
                            }
                        </Item>
                    </List>
                    <List renderHeader={() => '结算商品'} className="my-list">
                        {
                            accountsData.goodsList.map(e => {
                                return (
                                    <CommodityListItem
                                        img={e.imageUrl}
                                        price={e.goodsPrice}
                                        num={e.goodsNumber}
                                        title={e.goodsDesc}
                                    />
                                )
                            })
                        }
                    </List>
                </div>
                <div className={style.foot} >
                    <div className={style.total} >总价:¥{totalPrice}</div>
                    <div className={style.cancel} onClick={() => { history.goBack() }} >取 消</div>
                    <div className={style.buy}  >付 款</div>
                </div>
            </Panel >
            {addres && <AddresSselect id={sa} onOk={() => {
                setUrlParameter({ addres: undefined }, true);
                update();
            }} />}
        </>
    )
})

const useSettleAccounts = () => {

    const [sa] = useUrlParameter('sa');

    const [accountsData, setAccountsData] = React.useState<any>()

    const update = React.useCallback(async () => {
        if (!sa) return;
        const ajax = await server.get('/medicine/order/getOrderDetail', { id: sa }).end();
        if (ajax.err) {
        } else {
            setAccountsData(ajax.res.body.data);
        }
    }, [sa])

    React.useEffect(() => {
        update()
    }, [update])

    return {
        accountsData,
        update,
        sa
    }
}

const districtToString = (e: any[], list: any[], str: string) => {
    try {
        const ev = e ? e.slice() : [];
        if (ev && ev.length > 0) {
            const it = list.filter(v => v.value === ev[0])[0];
            if (it) {
                ev.shift();
                return districtToString(ev, it.children, `${str} ${it.label}`);
            } else {
                return str;
            }
        }
        return str;
    } catch (error) {
        return ''
    }
}